<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公共数据集 - DeepV AI平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                    },
                    boxShadow: {
                        'card': '0 2px 8px 0 rgba(0, 0, 0, 0.08)',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .hover-scale {
                transition: transform 0.3s ease-in-out;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
            .dataset-card-hover {
                transition: all 0.3s ease;
            }
            .dataset-card-hover:hover {
                box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
                transform: translateY(-2px);
            }
        }
    </style>
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="bg-gray-50 text-dark">
    <!-- 页面内容 -->
            <div class="p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm text-dark-2 mb-6">
                    <a href="home.html" class="hover:text-primary transition-all-300">首页</a>
                    <i class="fa fa-angle-right mx-2 text-light-3"></i>
                    <a href="home.html" class="hover:text-primary transition-all-300">我的项目</a>
                    <i class="fa fa-angle-right mx-2 text-light-3"></i>
                    <span class="text-dark font-medium" id="breadcrumb-project-name">智能安防检测</span>
                </div>
                <!-- 页面标题和操作区 -->
                <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                    <div>
                        <h1 class="text-2xl font-bold">公共数据集</h1>
                        <p class="text-sm text-dark-2 mt-1">浏览和申请使用平台共享的高质量标注数据集</p>
                    </div>
                    
                    <div class="mt-4 md:mt-0 flex items-center space-x-3">
                        <!-- 管理员可见的上传按钮 -->
                        <button class="bg-primary text-white px-4 py-2 rounded-lg text-sm hover:bg-primary/90 transition-all-300 flex items-center sys-admin">
                            <i class="fa fa-upload mr-1.5"></i> 上传数据集
                        </button>
                        <button class="bg-white text-primary border border-primary px-4 py-2 rounded-lg text-sm hover:bg-primary/5 transition-all-300 flex items-center">
                            <i class="fa fa-sliders mr-1.5"></i> 筛选
                        </button>
                    </div>
                </div>
                
                <!-- 统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <div class="bg-white rounded-xl shadow-card p-5 hover-scale">
                        <div class="flex items-start justify-between">
                            <div>
                                <h3 class="text-sm font-medium text-dark-2">数据集总数</h3>
                                <p class="text-2xl font-bold text-dark mt-1">48</p>
                            </div>
                            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                                <i class="fa fa-database text-primary"></i>
                            </div>
                        </div>
                        <div class="mt-3 flex items-center text-xs">
                            <span class="text-success flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 12%
                            </span>
                            <span class="text-dark-2 ml-2">较上月增长</span>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-5 hover-scale">
                        <div class="flex items-start justify-between">
                            <div>
                                <h3 class="text-sm font-medium text-dark-2">目标检测数据集</h3>
                                <p class="text-2xl font-bold text-dark mt-1">23</p>
                            </div>
                            <div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center">
                                <i class="fa fa-object-group text-secondary"></i>
                            </div>
                        </div>
                        <div class="mt-3 flex items-center text-xs">
                            <span class="text-dark-2">占比 47.9%</span>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-5 hover-scale">
                        <div class="flex items-start justify-between">
                            <div>
                                <h3 class="text-sm font-medium text-dark-2">图像分类数据集</h3>
                                <p class="text-2xl font-bold text-dark mt-1">18</p>
                            </div>
                            <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center">
                                <i class="fa fa-picture-o text-warning"></i>
                            </div>
                        </div>
                        <div class="mt-3 flex items-center text-xs">
                            <span class="text-dark-2">占比 37.5%</span>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-card p-5 hover-scale">
                        <div class="flex items-start justify-between">
                            <div>
                                <h3 class="text-sm font-medium text-dark-2">总使用次数</h3>
                                <p class="text-2xl font-bold text-dark mt-1">1,247</p>
                            </div>
                            <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center">
                                <i class="fa fa-download text-success"></i>
                            </div>
                        </div>
                        <div class="mt-3 flex items-center text-xs">
                            <span class="text-success flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 23%
                            </span>
                            <span class="text-dark-2 ml-2">较上月增长</span>
                        </div>
                    </div>
                </div>
                
                <!-- 搜索和分类筛选 -->
                <div class="bg-white rounded-xl shadow-card p-5 mb-6">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                        <div class="relative flex-1 max-w-md">
                            <input type="text" placeholder="搜索数据集名称、描述或标签..." 
                                class="w-full pl-10 pr-4 py-2 border border-light-2 rounded-lg focus:outline-none focus:border-primary">
                            <i class="fa fa-search absolute left-3 top-2.5 text-dark-2"></i>
                        </div>
                        
                        <div class="flex flex-wrap gap-3">
                            <select class="border border-light-2 rounded-lg px-3 py-2 bg-white text-dark-2 focus:outline-none focus:border-primary">
                                <option>所有类型</option>
                                <option>目标检测</option>
                                <option>图像分类</option>
                                <option>语义分割</option>
                                <option>实例分割</option>
                            </select>
                            
                            <select class="border border-light-2 rounded-lg px-3 py-2 bg-white text-dark-2 focus:outline-none focus:border-primary">
                                <option>所有场景</option>
                                <option>安防监控</option>
                                <option>自动驾驶</option>
                                <option>工业检测</option>
                                <option>医疗影像</option>
                                <option>零售商品</option>
                            </select>
                            
                            <select class="border border-light-2 rounded-lg px-3 py-2 bg-white text-dark-2 focus:outline-none focus:border-primary">
                                <option>按使用次数排序</option>
                                <option>按创建时间排序</option>
                                <option>按数据量排序</option>
                                <option>按评分排序</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- 数据集列表 -->
                <div class="bg-white rounded-xl shadow-card overflow-hidden mb-6">
                    <div class="p-5 border-b border-light-1">
                        <h2 class="text-lg font-bold">推荐数据集</h2>
                    </div>
                    
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 p-5">
                        <!-- 数据集卡片1 -->
                        <div class="border border-light-1 rounded-xl overflow-hidden dataset-card-hover">
                            <div class="flex flex-col md:flex-row">
                                <div class="w-full md:w-1/3 h-40 bg-light-1">
                                    <img src="https://picsum.photos/id/1015/800/800" alt="安防监控数据集" class="w-full h-full object-cover">
                                </div>
                                <div class="w-full md:w-2/3 p-4">
                                    <div class="flex items-start justify-between">
                                        <div>
                                            <h3 class="font-bold">安防监控数据集</h3>
                                            <div class="flex items-center mt-1 space-x-2">
                                                <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">目标检测</span>
                                                <span class="text-xs px-2 py-1 bg-light-1 text-dark-2 rounded-full">安防监控</span>
                                                <span class="text-xs px-2 py-1 bg-light-1 text-dark-2 rounded-full">
                                                    <i class="fa fa-eye mr-1"></i> 245次查看
                                                </span>
                                            </div>
                                        </div>
                                        <div class="flex flex-col items-end">
                                            <div class="flex items-center text-sm">
                                                <i class="fa fa-star text-warning mr-1"></i>
                                                <span>4.8</span>
                                            </div>
                                            <span class="text-xs text-dark-2 mt-1">2023-06-15更新</span>
                                        </div>
                                    </div>
                                    
                                    <p class="text-sm text-dark-2 mt-3 line-clamp-2">
                                        包含12,480张安防监控场景图像，涵盖多种光照条件和场景变化，已标注8个类别（行人、车辆、自行车等），适用于安防监控系统开发。
                                    </p>
                                    
                                    <div class="grid grid-cols-3 gap-2 mt-4 text-sm">
                                        <div class="text-center p-2 bg-light-1 rounded">
                                            <p class="text-dark-2 text-xs">图片数量</p>
                                            <p class="font-medium">12,480</p>
                                        </div>
                                        <div class="text-center p-2 bg-light-1 rounded">
                                            <p class="text-dark-2 text-xs">标注类别</p>
                                            <p class="font-medium">8</p>
                                        </div>
                                        <div class="text-center p-2 bg-light-1 rounded">
                                            <p class="text-dark-2 text-xs">数据大小</p>
                                            <p class="font-medium">12.5GB</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center justify-between mt-4">
                                        <div class="flex items-center space-x-2">
                                            <img src="https://picsum.photos/id/1001/100/100" alt="上传者" class="w-6 h-6 rounded-full object-cover">
                                            <span class="text-xs text-dark-2">平台官方</span>
                                        </div>
                                        <button class="bg-primary text-white px-3 py-1.5 rounded-lg text-sm hover:bg-primary/90 transition-all-300">
                                            申请使用
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据集卡片2 -->
                        <div class="border border-light-1 rounded-xl overflow-hidden dataset-card-hover">
                            <div class="flex flex-col md:flex-row">
                                <div class="w-full md:w-1/3 h-40 bg-light-1">
                                    <img src="https://picsum.photos/id/1071/800/800" alt="自动驾驶车辆数据集" class="w-full h-full object-cover">
                                </div>
                                <div class="w-full md:w-2/3 p-4">
                                    <div class="flex items-start justify-between">
                                        <div>
                                            <h3 class="font-bold">自动驾驶车辆数据集</h3>
                                            <div class="flex items-center mt-1 space-x-2">
                                                <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">目标检测</span>
                                                <span class="text-xs px-2 py-1 bg-light-1 text-dark-2 rounded-full">自动驾驶</span>
                                                <span class="text-xs px-2 py-1 bg-light-1 text-dark-2 rounded-full">
                                                    <i class="fa fa-eye mr-1"></i> 312次查看
                                                </span>
                                            </div>
                                        </div>
                                        <div class="flex flex-col items-end">
                                            <div class="flex items-center text-sm">
                                                <i class="fa fa-star text-warning mr-1"></i>
                                                <span>4.9</span>
                                            </div>
                                            <span class="text-xs text-dark-2 mt-1">2023-07-22更新</span>
                                        </div>
                                    </div>
                                    
                                    <p class="text-sm text-dark-2 mt-3 line-clamp-2">
                                        包含25,600张道路场景图像，涵盖各种天气和光照条件下的车辆、行人、交通标志等目标，精确标注，适用于自动驾驶感知系统训练。
                                    </p>
                                    
                                    <div class="grid grid-cols-3 gap-2 mt-4 text-sm">
                                        <div class="text-center p-2 bg-light-1 rounded">
                                            <p class="text-dark-2 text-xs">图片数量</p>
                                            <p class="font-medium">25,600</p>
                                        </div>
                                        <div class="text-center p-2 bg-light-1 rounded">
                                            <p class="text-dark-2 text-xs">标注类别</p>
                                            <p class="font-medium">12</p>
                                        </div>
                                        <div class="text-center p-2 bg-light-1 rounded">
                                            <p class="text-dark-2 text-xs">数据大小</p>
                                            <p class="font-medium">28.3GB</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center justify-between mt-4">
                                        <div class="flex items-center space-x-2">
                                            <img src="https://picsum.photos/id/1001/100/100" alt="上传者" class="w-6 h-6 rounded-full object-cover">
                                            <span class="text-xs text-dark-2">平台官方</span>
                                        </div>
                                        <button class="bg-primary text-white px-3 py-1.5 rounded-lg text-sm hover:bg-primary/90 transition-all-300">
                                            申请使用
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 数据集分类列表 -->
                <div class="space-y-6">
                    <!-- 目标检测数据集 -->
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <div class="p-5 border-b border-light-1">
                            <div class="flex items-center justify-between">
                                <h2 class="text-lg font-bold">目标检测数据集</h2>
                                <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                            </div>
                        </div>
                        
                        <div class="p-5">
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead>
                                        <tr class="border-b border-light-1">
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">数据集名称</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">场景</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">图片数量</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">标注类别</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">数据大小</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">更新时间</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">评分</th>
                                            <th class="px-4 py-3 text-right text-sm font-medium text-dark-2">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="border-b border-light-1 hover:bg-light-1/50 transition-all-300">
                                            <td class="px-4 py-4">
                                                <div class="flex items-center">
                                                    <div class="w-10 h-10 rounded bg-light-1 overflow-hidden mr-3 flex-shrink-0">
                                                        <img src="https://picsum.photos/id/1015/100/100" alt="安防监控数据集" class="w-full h-full object-cover">
                                                    </div>
                                                    <div>
                                                        <p class="font-medium">安防监控数据集</p>
                                                        <p class="text-xs text-dark-2 mt-0.5">12,480张安防场景图像</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-sm">
                                                <span class="px-2 py-1 bg-light-1 text-dark-2 text-xs rounded-full">安防监控</span>
                                            </td>
                                            <td class="px-4 py-4 text-sm">12,480</td>
                                            <td class="px-4 py-4 text-sm">8</td>
                                            <td class="px-4 py-4 text-sm">12.5GB</td>
                                            <td class="px-4 py-4 text-sm text-dark-2">2023-06-15</td>
                                            <td class="px-4 py-4 text-sm">
                                                <div class="flex items-center">
                                                    <i class="fa fa-star text-warning mr-1"></i>
                                                    <span>4.8</span>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-right">
                                                <button class="bg-primary text-white px-3 py-1.5 rounded-lg text-sm hover:bg-primary/90 transition-all-300 mr-2">
                                                    申请使用
                                                </button>
                                                <button class="text-dark-2 hover:text-dark transition-all-300">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        
                                        <tr class="border-b border-light-1 hover:bg-light-1/50 transition-all-300">
                                            <td class="px-4 py-4">
                                                <div class="flex items-center">
                                                    <div class="w-10 h-10 rounded bg-light-1 overflow-hidden mr-3 flex-shrink-0">
                                                        <img src="https://picsum.photos/id/1071/100/100" alt="自动驾驶车辆数据集" class="w-full h-full object-cover">
                                                    </div>
                                                    <div>
                                                        <p class="font-medium">自动驾驶车辆数据集</p>
                                                        <p class="text-xs text-dark-2 mt-0.5">25,600张道路场景图像</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-sm">
                                                <span class="px-2 py-1 bg-light-1 text-dark-2 text-xs rounded-full">自动驾驶</span>
                                            </td>
                                            <td class="px-4 py-4 text-sm">25,600</td>
                                            <td class="px-4 py-4 text-sm">12</td>
                                            <td class="px-4 py-4 text-sm">28.3GB</td>
                                            <td class="px-4 py-4 text-sm text-dark-2">2023-07-22</td>
                                            <td class="px-4 py-4 text-sm">
                                                <div class="flex items-center">
                                                    <i class="fa fa-star text-warning mr-1"></i>
                                                    <span>4.9</span>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-right">
                                                <button class="bg-primary text-white px-3 py-1.5 rounded-lg text-sm hover:bg-primary/90 transition-all-300 mr-2">
                                                    申请使用
                                                </button>
                                                <button class="text-dark-2 hover:text-dark transition-all-300">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        
                                        <tr class="border-b border-light-1 hover:bg-light-1/50 transition-all-300">
                                            <td class="px-4 py-4">
                                                <div class="flex items-center">
                                                    <div class="w-10 h-10 rounded bg-light-1 overflow-hidden mr-3 flex-shrink-0">
                                                        <img src="https://picsum.photos/id/1059/100/100" alt="工业缺陷检测数据集" class="w-full h-full object-cover">
                                                    </div>
                                                    <div>
                                                        <p class="font-medium">工业缺陷检测数据集</p>
                                                        <p class="text-xs text-dark-2 mt-0.5">8,750张工业产品图像</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-sm">
                                                <span class="px-2 py-1 bg-light-1 text-dark-2 text-xs rounded-full">工业检测</span>
                                            </td>
                                            <td class="px-4 py-4 text-sm">8,750</td>
                                            <td class="px-4 py-4 text-sm">6</td>
                                            <td class="px-4 py-4 text-sm">9.2GB</td>
                                            <td class="px-4 py-4 text-sm text-dark-2">2023-05-30</td>
                                            <td class="px-4 py-4 text-sm">
                                                <div class="flex items-center">
                                                    <i class="fa fa-star text-warning mr-1"></i>
                                                    <span>4.7</span>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-right">
                                                <button class="bg-primary text-white px-3 py-1.5 rounded-lg text-sm hover:bg-primary/90 transition-all-300 mr-2">
                                                    申请使用
                                                </button>
                                                <button class="text-dark-2 hover:text-dark transition-all-300">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 图像分类数据集 -->
                    <div class="bg-white rounded-xl shadow-card overflow-hidden">
                        <div class="p-5 border-b border-light-1">
                            <div class="flex items-center justify-between">
                                <h2 class="text-lg font-bold">图像分类数据集</h2>
                                <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
                            </div>
                        </div>
                        
                        <div class="p-5">
                            <div class="overflow-x-auto">
                                <table class="w-full">
                                    <thead>
                                        <tr class="border-b border-light-1">
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">数据集名称</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">场景</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">图片数量</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">分类类别</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">数据大小</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">更新时间</th>
                                            <th class="px-4 py-3 text-left text-sm font-medium text-dark-2">评分</th>
                                            <th class="px-4 py-3 text-right text-sm font-medium text-dark-2">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="border-b border-light-1 hover:bg-light-1/50 transition-all-300">
                                            <td class="px-4 py-4">
                                                <div class="flex items-center">
                                                    <div class="w-10 h-10 rounded bg-light-1 overflow-hidden mr-3 flex-shrink-0">
                                                        <img src="https://picsum.photos/id/26/100/100" alt="花卉分类数据集" class="w-full h-full object-cover">
                                                    </div>
                                                    <div>
                                                        <p class="font-medium">花卉分类数据集</p>
                                                        <p class="text-xs text-dark-2 mt-0.5">30,000张花卉图像</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-sm">
                                                <span class="px-2 py-1 bg-light-1 text-dark-2 text-xs rounded-full">自然图像</span>
                                            </td>
                                            <td class="px-4 py-4 text-sm">30,000</td>
                                            <td class="px-4 py-4 text-sm">102</td>
                                            <td class="px-4 py-4 text-sm">15.7GB</td>
                                            <td class="px-4 py-4 text-sm text-dark-2">2023-04-18</td>
                                            <td class="px-4 py-4 text-sm">
                                                <div class="flex items-center">
                                                    <i class="fa fa-star text-warning mr-1"></i>
                                                    <span>4.6</span>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-right">
                                                <button class="bg-primary text-white px-3 py-1.5 rounded-lg text-sm hover:bg-primary/90 transition-all-300 mr-2">
                                                    申请使用
                                                </button>
                                                <button class="text-dark-2 hover:text-dark transition-all-300">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        
                                        <tr class="border-b border-light-1 hover:bg-light-1/50 transition-all-300">
                                            <td class="px-4 py-4">
                                                <div class="flex items-center">
                                                    <div class="w-10 h-10 rounded bg-light-1 overflow-hidden mr-3 flex-shrink-0">
                                                        <img src="https://picsum.photos/id/96/100/100" alt="医疗影像分类数据集" class="w-full h-full object-cover">
                                                    </div>
                                                    <div>
                                                        <p class="font-medium">医疗影像分类数据集</p>
                                                        <p class="text-xs text-dark-2 mt-0.5">5,200张X光片</p>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-sm">
                                                <span class="px-2 py-1 bg-light-1 text-dark-2 text-xs rounded-full">医疗影像</span>
                                            </td>
                                            <td class="px-4 py-4 text-sm">5,200</td>
                                            <td class="px-4 py-4 text-sm">8</td>
                                            <td class="px-4 py-4 text-sm">7.8GB</td>
                                            <td class="px-4 py-4 text-sm text-dark-2">2023-07-05</td>
                                            <td class="px-4 py-4 text-sm">
                                                <div class="flex items-center">
                                                    <i class="fa fa-star text-warning mr-1"></i>
                                                    <span>4.8</span>
                                                </div>
                                            </td>
                                            <td class="px-4 py-4 text-right">
                                                <button class="bg-primary text-white px-3 py-1.5 rounded-lg text-sm hover:bg-primary/90 transition-all-300 mr-2">
                                                    申请使用
                                                </button>
                                                <button class="text-dark-2 hover:text-dark transition-all-300">
                                                    <i class="fa fa-ellipsis-v"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="flex items-center justify-between mt-6">
                    <div class="text-sm text-dark-2">
                        显示 <span class="font-medium text-dark">1-5</span> 条，共 <span class="font-medium text-dark">48</span> 条数据
                    </div>
                    <div class="flex items-center space-x-1">
                        <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-light-2 bg-white text-dark-2 hover:border-primary hover:text-primary transition-all-300 disabled:opacity-50 disabled:pointer-events-none" disabled>
                            <i class="fa fa-angle-left"></i>
                        </button>
                        <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-primary bg-primary text-white">1</button>
                        <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-light-2 bg-white text-dark-2 hover:border-primary hover:text-primary transition-all-300">2</button>
                        <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-light-2 bg-white text-dark-2 hover:border-primary hover:text-primary transition-all-300">3</button>
                        <span class="w-9 h-9 flex items-center justify-center text-dark-2">...</span>
                        <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-light-2 bg-white text-dark-2 hover:border-primary hover:text-primary transition-all-300">10</button>
                        <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-light-2 bg-white text-dark-2 hover:border-primary hover:text-primary transition-all-300">
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
            </div>
    
    <!-- 申请使用对话框 -->
    <div id="applyModal" class="fixed inset-0 bg-dark/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl w-full max-w-md mx-4">
            <div class="p-5 border-b border-light-1">
                <div class="flex items-center justify-between">
                    <h3 class="font-bold text-lg">申请使用数据集</h3>
                    <button id="closeModal" class="text-dark-2 hover:text-dark transition-all-300">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            
            <div class="p-5">
                <div class="flex items-center space-x-3 mb-4">
                    <div class="w-12 h-12 rounded bg-light-1 overflow-hidden">
                        <img src="https://picsum.photos/id/1015/100/100" alt="安防监控数据集" class="w-full h-full object-cover">
                    </div>
                    <div>
                        <p class="font-medium">安防监控数据集</p>
                        <p class="text-xs text-dark-2">12,480 张图片 · 8 个类别</p>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-dark mb-1">申请用途</label>
                    <select class="w-full border border-light-2 rounded-lg px-3 py-2 focus:outline-none focus:border-primary">
                        <option>学术研究</option>
                        <option>产品开发</option>
                        <option>算法测试</option>
                        <option>其他用途</option>
                    </select>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-dark mb-1">详细说明</label>
                    <textarea rows="3" class="w-full border border-light-2 rounded-lg px-3 py-2 focus:outline-none focus:border-primary" placeholder="请简要描述您使用该数据集的目的和计划..."></textarea>
                </div>
                
                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" class="w-4 h-4 text-primary rounded border-light-2">
                        <span class="ml-2 text-sm text-dark-2">我已阅读并同意<a href="#" class="text-primary hover:underline">《数据集使用协议》</a></span>
                    </label>
                </div>
            </div>
            
            <div class="p-5 border-t border-light-1 flex justify-end space-x-3">
                <button id="cancelApply" class="px-4 py-2 border border-light-2 rounded-lg text-dark-2 hover:bg-light-1 transition-all-300">
                    取消
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all-300">
                    提交申请
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // 显示申请对话框
        document.addEventListener('DOMContentLoaded', function() {
            const applyButtons = document.querySelectorAll('button:contains("申请使用")');
            const applyModal = document.getElementById('applyModal');
            const closeModal = document.getElementById('closeModal');
            const cancelApply = document.getElementById('cancelApply');
            
            applyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    applyModal.classList.remove('hidden');
                });
            });
            
            closeModal.addEventListener('click', function() {
                applyModal.classList.add('hidden');
            });
            
            cancelApply.addEventListener('click', function() {
                applyModal.classList.add('hidden');
            });
            
            // 点击模态框外部关闭
            applyModal.addEventListener('click', function(e) {
                if (e.target === applyModal) {
                    applyModal.classList.add('hidden');
                }
            });
            
            // 管理员功能显示控制 (实际项目中应根据用户角色动态控制)
            const adminElements = document.querySelectorAll('.sys-admin');
            adminElements.forEach(el => {
                // 模拟管理员登录状态，实际应从后端获取用户角色
                const isAdmin = true;
                if (!isAdmin) {
                    el.style.display = 'none';
                }
            });
        });
        
        // 扩展选择器以支持:contains选择器
        (function() {
            const containsSelector = /:contains\(([^)]+)\)/;
            
            const originalQuerySelectorAll = Document.prototype.querySelectorAll;
            Document.prototype.querySelectorAll = function(selector) {
                const match = selector.match(containsSelector);
                if (match) {
                    const text = match[1].replace(/^['"](.*)['"]$/, '$1');
                    const baseSelector = selector.replace(containsSelector, '');
                    const elements = originalQuerySelectorAll.call(this, baseSelector);
                    return Array.from(elements).filter(el => 
                        el.textContent && el.textContent.includes(text)
                    );
                }
                return originalQuerySelectorAll.call(this, selector);
            };
        })();
    </script>
</body>
</html>